Breadcrumbs webcomponent

This is a slightly different take on the awesome breadcrumbs by Adam Argyle. This project is closely modeled on the original work, since I really liked that take on breadcrumbs. Modifications include, but are not limited to:

This demo is only meant to show basic of how it works, not actually be interactive on navigation. For that any page loader could be used to update the breadcrumbs content.


The component has a very basic API, and more functionality can be added easially.


To update content after initial render, one can send the component a new object to update contents from by calling document.querySelector('bread-crumbs').use(dataObject);


bread-crumbs {} The main component styles, like colour, font size, etc.

--icon-gap: 1px; Set the gap between the icon and text of an item.

--item-gap: 10px; Set the gap between items.

--divider: '/'; Set the character used as divider between items.

--divider-color: #aaa; Set the colour used on the divider between items.

bread-crumbs::part(a) {} You can give the anchor elements any style you want, like colour, etc.


Source code, issue list, etc, on GitHub.